<template>
  <div class="counte">
    <div class="title_bread">
      <span>作品集</span> <span>/ Works Collection</span>
    </div>
    <div class="content">
      <ul>
        <li
          v-for="(item, index) in worksList"
          :key="index"
          class="flipInY animated"
        >
          <a :href="item.href" target="_blank"><img :src="item.src" /></a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { reactive } from "vue";
import hehe from "@/assets/11.jpg";
import gold from "@/assets/22.jpg";
import yidejia from "@/assets/33.jpg";
import jiance from "@/assets/44.jpg";
import work from "@/assets/works-5.jpg";

export default {
  name: "Works",
  setup() {
    const worksList = reactive([
      {
        src: hehe,
        href: "http://www.hehedeniu.cn",
      },
      {
        src: gold,
        href: "http://www.58gold.com/",
      },
      {
        src: yidejia,
        href: "https://www.yidejia.com/",
      },
      {
        src: jiance,
        href: "https://isite.baidu.com/site/wjzpg19w/7e8ae9c3-e10e-4a81-b003-f4e5f7231c2b?fid=nHf1PWDYnWR1rHTknWm4n1bvrHKxnWcdg1D&ch=4&bfid=fbuFw0cK2bfA0DtcH_T00rD00fZw1xsKwrseu0Y000aa-Rg5Ns000a0070DcVXxF1Q1__8c8dXrqoUgMzTzteQQBQIXCYoydv_WqVevteQQB8OJ48iLRLU2eEIr3q_WQErzz3-zvpQs&bd_vid=8023282585876156022&uniqId=848ea253715d478b8f1bbe65f5b3bc39&title=%E9%A6%96%E9%A1%B5&field=&orderBy=&categoryId=undefined",
      },
      {
        src: work,
        href: "https://isite.baidu.com/site/wjzpg19w/7e8ae9c3-e10e-4a81-b003-f4e5f7231c2b?fid=nHf1PWDYnWR1rHTknWm4n1bvrHKxnWcdg1D&ch=4&bfid=fbuFw0cK2bfA0DtcH_T00rD00fZw1xsKwrseu0Y000aa-Rg5Ns000a0070DcVXxF1Q1__8c8dXrqoUgMzTzteQQBQIXCYoydv_WqVevteQQB8OJ48iLRLU2eEIr3q_WQErzz3-zvpQs&bd_vid=8023282585876156022&uniqId=848ea253715d478b8f1bbe65f5b3bc39&title=%E9%A6%96%E9%A1%B5&field=&orderBy=&categoryId=undefined",
      },
    ]);
    return { worksList };
  },
};
</script>
<style scoped>
.content ul {
  width: 100%;
  display: flex;
  justify: space-between;
  flex-wrap: wrap;
}
.content ul li {
  display: inline-block;
  width: 330px;
  height: 380px;
  margin-right: 22px;
  border-radius: 20px;
  margin-top: 20px;
}

.content ul li:nth-child(1) {
  width: 680px;
  height: 380px;
  margin-left: 17px;
}
.content ul li:nth-child(2) {
  margin-right: 0;
}
.content ul li:nth-child(3) {
  margin-left: 17px;
}
.content ul li:nth-child(5) {
  margin-right: 0;
}
.content ul li img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.content ul li img:hover {
  transition: all 1s ease 0s;
  box-shadow: 4px 4px 3px #bbb;
  animation: tada 3s 1;
  -webkit-animation: tada 3s 1; /* Safari 和 Chrome */
}

/*the animation definition*/
@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    -ms-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
    -ms-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}
</style>
